<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" th:href="@{/asserts/bootstrap4/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/asserts/css/QuestionForm.css}">
</head>
<body>
<div class="container">
    <div class="questionForm">
        <div class="formTitle">
        </div>
        <div class="person_msg">
            <div class="message">
                <span style="font-weight: bold">班级:</span>
                <span class="stu_major">

                </span>
            </div>
            <div class="message">
                <span style="font-weight: bold">学号:</span>
                <span class="stu_num">

                </span>
            </div>
            <div class="message">
                <span style="font-weight: bold">姓名:</span>
                <span class="stu_name">

                </span>
            </div>
        </div>
        <hr/>
        <div class="content">

        </div>

        <!--题目模板-->
        <div class="content_model">
            <!--单选模板-->
            <div class="Component oneChoose">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(单选题)</span>
                </div>
                <div class="com_options">
                    <div class="clear"></div>
                </div>
            </div>

            <!--多选模板-->
            <div class="Component moreChoose">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(多选题)</span>
                </div>
                <div class="com_options">
                    <div class="clear"></div>
                </div>
            </div>

            <!--单行文本模板-->
            <div class="Component oneLineText">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(单行)</span>
                </div>
                <div class="com_content">
                    <span>答：</span>
                    <span class="oneLineAnswer">

                    </span>
                </div>
            </div>

            <!--多行文本模板-->
            <div class="Component moreLineText">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(多行)</span>
                </div>
                <div class="com_content">
                    <span>答：</span>
                    <span class="moreLineAnswer">

                    </span>
                </div>
            </div>

            <!--人员推荐模板-->
            <div class="Component recommendPerson">
                <div class="num_title">
                    <span class="com_num"></span>
                    <span class="com_title"></span>
                    <span class="com_type">(人员推荐)</span>
                </div>
                <div class="com_content">
                    <div>
                        <span>班级:</span><span class="person_major"></span>
                    </div>
                    <div>
                        <span>学号:</span><span class="person_Num"></span>
                    </div>
                    <div>
                        <span>姓名:</span><span class="person_Name"></span>
                    </div>
                </div>
            </div>

            <!--单选选项模板-->
            <div class="oneOptionDetails oneChoose_option">
                <span class="option_num">A、</span>
                <span class="option_text">选项A</span>
            </div>

            <!--多选选项模板-->
            <div class="oneOptionDetails moreChoose_option">
                <span class="option_num">A、</span>
                <span class="option_text">选项A</span>
            </div>
        </div>

    </div>
</div>
</body>
<script th:src="@{/asserts/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/asserts/js/popper.min.js}"></script>
<script th:src="@{/asserts/bootstrap4/js/bootstrap.js}"></script>
<script th:src="@{/asserts/js/canvas-nest.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // 渲染部分
    $(function () {
        var option_code = ["A.", "B.", "C.", "D.", "E.", "F.", "G.", "H.", "I.", "J.", "K.", "L.", "M.", "N.", "O.", "P.", "Q.", "R.", "S.", "T.",
            "U.", "V.", "W.", "X.", "Y.", "Z."];
        var formDetails = [[${data}]];
        var title = formDetails.title;
        var stuNum = formDetails.stu_id;
        var major = formDetails.major_name;
        var stuName = formDetails.stu_name;
        var answerContent = formDetails.answerContent;
        var content = formDetails.formContent;
        $(".formTitle").text(title);
        $("title").text(stuNum+stuName+"-"+title);
        $(".stu_major").text(major);
        $(".stu_num").text(stuNum);
        $(".stu_name").text(stuName);
        for (var i = 0;i < content.length;i ++){
            var type = content[i].type;
            var title_com = content[i].title;
            switch (type) {
                case "oneChoose":
                    var component = $(".content_model").children(".oneChoose").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    var options = content[i].options;
                    var answer = answerContent[i].answer;
                    var clear = component.find(".clear");
                    for (var j = 0;j < options.length;j ++){
                        var option = $(".content_model").children(".oneChoose_option").clone(true);
                        option.children(".option_num").text(option_code[j]);
                        option.children(".option_text").text(options[j]);
                        if (j === answer){
                            option.attr("class","oneOptionDetails oneChoose_option option_click");
                        }
                        $(clear).before(option);
                    }
                    break;
                case "moreChoose":
                    var component = $(".content_model").children(".moreChoose").clone(true);
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    var options = content[i].options;
                    var answer = answerContent[i].answer;
                    var clear = component.find(".clear");
                    for (var j = 0;j < options.length;j ++){
                        var option = $(".content_model").children(".moreChoose_option").clone(true);
                        option.children(".option_num").text(option_code[j]);
                        option.children(".option_text").text(options[j]);
                        if (j in answer){
                            option.attr("class","oneOptionDetails moreChoose_option option_click");
                        }
                        $(clear).before(option);
                    }
                    break;
                case "oneLineText":
                    var component = $(".content_model").children(".oneLineText").clone(true);
                    var answer = answerContent[i].answer;
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    component.find(".oneLineAnswer").text(answer);
                    break;
                case "moreLineText":
                    var component = $(".content_model").children(".moreLineText").clone(true);
                    var answer = answerContent[i].answer;
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    component.find(".moreLineAnswer").text(answer);
                    break;
                case "recommendPerson":
                    var component = $(".content_model").children(".recommendPerson").clone(true);
                    var answer = answerContent[i].answer;
                    component.find(".com_num").text((i+1)+"、");
                    component.find(".com_title").text(title_com);
                    component.find(".person_major").text(answer[0]);
                    component.find(".person_Num").text(answer[1]);
                    component.find(".person_Name").text(answer[2]);
                    break;
            }
            $(".content").append(component);
        }
    });
</script>
</html>